<template>
  <KView class="sys-goods-classify">
    <template v-if="isShow">
      <KView class="sys-goods-classify-content">
        <KView class="sys-goods-classify-menus">
          <goods-classify-menu :type-list="goodsTypeList" :cur-type.sync="curType" :buy-record="buyRecord" @change="typeChange">
          </goods-classify-menu>
        </KView>
        <KView class="sys-goods-classify-data" :key="pageKey">
          <goods-view :goods-list="goodsList" :buy-record="buyRecord" :pagination="pagination" :next-data-fun="setGoodsList" @item-click="itemClick">
          </goods-view>
        </KView>
      </KView>

      <KView class="goods-classify-balance" v-if="hasBalance">
        <shop-goods-balance :buy-record="buyRecord"></shop-goods-balance>
      </KView>
    </template>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  import ClassifyApi from 'services/classifyApi';

  import Pagination from 'models/pagination';
  import GoodsBuyRecord from 'models/classify/goodsBuyRecord';

  import GoodsClassifyMenu from './goodsClassifyMenu';
  import GoodsView from '../goodsView';
  import ShopGoodsBalance from '../goodsView/shopGoodsBalance';

  export default {
    computed: {
      hasBalance() {
        let buyRecord = this.buyRecord;
        if (buyRecord === null) {
          return false;
        }

        let goodsModelIds = buyRecord.goodsModelIds;
        return goodsModelIds.length > 0;
      }
    },

    data() {
      return {
        isShow: false,
        isMiniprogram: process.env.isMiniprogram,
        goodsTypeList: [],
        curType: null,
        goodsList: [],
        buyRecord: new GoodsBuyRecord(),
        pagination: new Pagination(),
        pageKey: SystemUtil.getId()
      };
    },

    created() {
      SystemUtil.showLoading();
      this.setGoodsTypeList().then(typeList => {
        let typeId = this.$route.query.typeId;
        let curType;
        if (typeId !== undefined) {
          typeId = Number(typeId);
          curType = typeList.find(obj => obj.id === typeId);
        }
        this.curType = curType || typeList[0];
        return this.setGoodsList(true).then(() => {
          this.isShow = true;
          SystemUtil.hideLoading();
        });
      }).catch(() => {
        SystemUtil.hideLoading();
      });
    },

    methods: {
      setGoodsTypeList() {
        return ClassifyApi.getAllGoodsTypeList().then(typeList => {
          this.goodsTypeList = typeList;
          return typeList;
        });
      },

      setGoodsList(isInit = false, pagination) {
        if (pagination === undefined) {
          pagination = this.pagination;
        }
        return ClassifyApi.getGoodsList(this.curType, pagination).then(goodsList => {
          if (isInit) {
            this.goodsList = goodsList;
          } else {
            this.goodsList.push(...goodsList);
          }
          return goodsList;
        });
      },

      typeChange() {
        let pagination = new Pagination();
        SystemUtil.showLoading();
        this.setGoodsList(true, pagination).then(() => {
          this.pagination = pagination;
          this.pageKey = SystemUtil.getId();
          SystemUtil.hideLoading();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      itemClick(goods){
        let defId = goods.defId;
        if (SystemUtil.isEmpty(defId)) {
          return;
        }

        let url = `/goodsDetail/${defId}`;
        if (this.isMiniprogram) {
          window.open(url);
        }
      }
    },

    components: {
      GoodsClassifyMenu,
      GoodsView,
      ShopGoodsBalance
    }
  };

</script>

<style lang="scss">
  .sys-goods-classify {
    height: 100%;
    position: relative;

    .sys-goods-classify-content {
      height: 100%;
      overflow: auto;

      >div {
        float: left;
        height: 100%;
      }

      .sys-goods-classify-menus {
        width: formatPx(190);
      }

      .sys-goods-classify-data {
        margin-left: formatPx(20);
        width: calc(100% - #{formatPx(210)});
        overflow: auto;

        .shop-goods-view {
          padding-left: 0;
        }
      }
    }

    .goods-classify-balance {
      position: absolute;
      left: formatPx(30);
      right: formatPx(30);
      bottom: 0;
      height: formatPx(98);
    }
  }

</style>
